<script setup lang="ts">
const imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
    "&tk=您的密钥";
const imageURLT = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
    "&tk=您的密钥";
const lay = new T.TileLayer(imageURL, { minZoom: 6, maxZoom: 18 });
const lay2 = new T.TileLayer(imageURLT, { minZoom: 6, maxZoom: 18 });
const config = { layers: [lay, lay2] };
let map = new T.Map('yzMap', config);
map.centerAndZoom(new T.LngLat(110.15114, 22.6281), 11);

</script>

<template>
  <div class="flex w-full gap-1">
    <div id="map" class="map__x grow h-full
    bg-#84b9bf"></div>
    <div class="bg-white w-80 flex justify-center items-center">
      <div>用于地区信息展示</div>
    </div>
  </div>
</template>

<style scoped>

</style>